// steps panel

.stepanel {
  position: relative;
  margin-top: 30px;
  padding: 60px 260px 112px;
  border-top: 4px solid transparent;
  box-shadow: 0 0 12px rgba(104, 151, 255, .3);
  background-color: #fff;
  z-index: 0;

  &__arrow {
    border: $steps-panel-arrow-height solid transparent;
    border-top: 0;
    border-bottom-color: #fff;
    border-left-width: $steps-panel-arrow-width / 2;
    border-right-width: $steps-panel-arrow-width / 2;
    top: -($steps-panel-arrow-height + $steps-panel-border-width);
    left: 43px;

    &, &:before, &:after {
      position: absolute;
      content: '';
    }

    &:before {
      border-left: $steps-panel-arrow-width / 2 + 2 solid transparent;
      border-right: $steps-panel-arrow-width / 2 + 2 solid transparent;
      border-bottom: $steps-panel-arrow-height + 1 solid rgba(104, 151, 255, .1);
      top: -1px;
      left: -($steps-panel-arrow-width / 2 + 2);
      z-index: -1;
    }

    &:after {
      width: 44px;
      height: 4px;
      background-color: #F7BA5B;
      left: $steps-panel-arrow-width / 2;
      bottom: -($steps-panel-arrow-height + $steps-panel-border-width);
    }

    &.nobar:after {
      content: none;
    }
  }

  &__guide {
    text-align: center;

    .guide {
      &__img {
        width: 126px;
        height: 100px;
        margin: 0 auto 32px;

        > img {
          display: block;
          width: 100%
        }
      }

      &__title {
        margin-bottom: 20px;
        font-size: 20px;
        color: $primary;
        line-height: 1;
      }

      &__desc {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 18px;
        color: #9B9B9B;
        line-height: (21 / 18);
      }

      &__btn {
        margin-top: 34px;
      }
    }
  }
}
